<template>
<view class="danmuBox">
	<image v-for="item in imageListData" :class="showAnimation?'animationItem':'displayNone'" :style="{animationDelay:item.delay,top:item.top,animationDuration:item.speed}" :src="item.src" mode="heightFix"></image>
</view>
</template>

<script setup lang="ts">
import { ref,nextTick } from 'vue'
import {onLoad} from '@dcloudio/uni-app'
	const props=defineProps({
		imagesList:{
			type:Array,
			default:[
	  'http://img.abatour.com/2025-05-06/图层 789@2x_1746510542079.png',
	  'http://img.abatour.com/2025-05-06/图层 791@2x_1746510581307.png',
	  'http://img.abatour.com/2025-05-06/图层 792@2x(1)_1746510615597.png',
	  'http://img.abatour.com/2025-05-06/图层 792@2x_1746510646564.png',
	]
		}
	})
	const randomDataList=[
		{
			top:"168rpx",
			delay:"1.3s",
			speed:"15s",
		},
		{
			top:"246rpx",
			delay:"2s",
			speed:"10s",
		},
		{
			top:"82rpx",
			delay:"0.4s",
			speed:"8s",
		},
		{
			top:"109rpx",
			delay:"1s",
			speed:"13s",
		},
		{
			top:"295rpx",
			delay:"6s",
			speed:"21s",
		},
		{
			top:"340rpx",
			delay:"9s",
			speed:"17s",
		},
		{
			top:"386rpx",
			delay:"1s",
			speed:"22s",
		},
		{
			top:"421rpx",
			delay:"10s",
			speed:"14s",
		},
		{
			top:"90rpx",
			delay:"5s",
			speed:"30s",
		},
		{
			top:"10rpx",
			delay:"15s",
			speed:"25s",
		},
	]
	const imageListData=ref([])
	const showAnimation=ref(true)
	/**
	* @description 初始化弹幕
	* @author 杨燕娥
	*/
	const initData=(list?)=>{
		showAnimation.value=false
		imageListData.value=[]
		const imgList=list||props.imagesList
		imgList.forEach((item,index)=>{
			imageListData.value.push({
				src:item,
				top:randomDataList[index%10].top,
				delay:Math.random()*2+'s',
				speed:randomDataList[index%10].speed,
			})
			
		})
		// 清除原本的动画
		setTimeout(()=>{
			showAnimation.value=true
		},300)
	}
	onLoad(()=>{
		initData()
	})
	defineExpose({initData})
</script>

<style lang="scss" scoped>
.danmuBox{
	position: absolute;
	left: 0;
	top:0;
	width: 100%;
	height: 400rpx;
}
.animationItem{
	height: 40rpx;
	position: absolute;
	opacity: 0;
	animation: codeMove linear infinite;
}
.displayNone{
	display: none;
}
@keyframes codeMove{
			0%{
				transform: translateX(800rpx);
				opacity: 1;
			}
			100%{
				transform: translateX(-800rpx);
				opacity: 1;
			}
	}
</style>